<!-- 商品规格 -->
<template>
	<view class="container">
		<text class="title">商品规格</text>
		<view class="list">
			<view class="list-item" @click="handleNavTo('/pagesB-goods-manage/add-goods-combo/index')">
				<text class="label">商品规格</text>
				<text class="value">添加规格</text>
				<text class="iconfont">&#xe61a;</text>
			</view>
			<view class="table">
				<view class="tr" v-for="value in 3" :key="value">
					<view class="td">100g</view>
					<view class="td">大包</view>
					<view class="td">价格:¥5.9</view>
					<view class="td">库存:203</view>
					<view class="td"><button class="btn iconfont btn-transition-scale9">&#xe626;</button></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const handleNavTo = (url) => {
		uni.navigateTo({
			url
		});
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx 25rpx 0;

		.title {
			font-weight: bold;
			font-size: 30rpx;
			color: #222222;
			line-height: 1.5;
			padding-left: 4rpx;
		}
	}

	.list {
		background-color: white;
		border-radius: 20rpx;
		padding-left: 30rpx;
		margin-top: 30rpx;

		&-item {
			display: flex;
			align-items: center;
			height: 100rpx;
			padding-right: 20rpx;

			.label {
				flex-grow: 1;
				font-size: 28rpx;
				color: #222222;
			}
			
			.value {
				flex-shrink: 0;
				font-size: 28rpx;
				color: #222222;
			}
			
			.iconfont {
				flex-shrink: 0;
				font-size: 28rpx;
				color: #222222;
				margin-left: 6rpx;
			}
		}
		
		.table {
			.tr {
				display: grid;
				grid-template-columns: 1.5fr 1.5fr 2fr 2fr 1fr;
				height: 76rpx;
				
				.td {
					font-size: 28rpx;
					color: #222222;
					text-align: left;
					line-height: 76rpx;
					
					.btn {
						font-size: 34rpx;
						color: #FE3333;
						line-height: 76rpx;
						background-color: transparent;
					}
				}
			}
		}
	}
</style>